<template>
	<view class="integral-wrapp">
		<view class="integral-top">
			<view class="img">
				<image src="https://img.367edu.com/200742/0/ebc992bd-cd93-4d30-9b1b-c53538b347e5/original" @click="navTo('/pages/shop/shop')" mode="widthFix"></image>
			</view>
			<view class="integral-top-ul flex">
				<view class="integral-top-ul-li" v-for="(item,index) in 1" :key="index">
					<view class="num">
						{{user_integral}}
					</view>
					<view class="sub">
						积分
					</view>
				</view>
			</view>
		</view>
		
		<view class="integral-main">
			<view class="integral-main-tab flex">
				<view class="nav"  v-for="(item,index) in tabList" :key="index" @click="tabClick(index)">
					<text class="title">{{item}}</text>
					
					<view class="line" v-if="index == tabLindex"></view>
				</view>
			</view>
			<view class="list" v-if="0 == tabLindex">
				<view class="item flex" v-for="(item,index) in List" :key="index">
					<view class="left">
						<view class="title">
							{{item.str}}
						</view>
						<view class="time">
							{{item.createDate}}
						</view>
					</view>
					<view class="num">
						+ {{item.val}}
					</view>
				</view>
			</view>
			
			<view class="list" v-if="1 == tabLindex">
				<view class="item flex" v-for="(item,index) in List2" :key="index">
					<view class="left">
						<view class="title">
							{{item.str}}
						</view>
						<view class="time">
							{{item.createDate}}
						</view>
					</view>
					<view class="num">
						- {{item.val}}
					</view>
				</view>
			</view>
			
			
			<view v-if="List2.length==0 && tabLindex == 1 || List.length ==0 && tabLindex == 0" class="cm-none-tips">
				<image src="../../static/images/none_tip.png" mode="aspectFit"></image>
				<view>暂无{{tabLindex == 0?'积分获取记录': '积分兑换记录'}}~</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Util from '@/utils/util';
	import Alert from '@/utils/alert';
	import Api from '@/utils/api';
	import Rest from '@/utils/rest';
	
	import {
		mapState,
		mapGetters,
		mapMutations
	} from 'vuex'
	import store from '@/store/index.js'
	
	export default {
		data() {
			return {
				user_integral:0,
				tabLindex: 0,
				tabList: ['积分获取记录','积分兑换记录'],
				List:[],
				List2:[]
			};
		},
		onShow() {
			this.integral()
			
			
		},
		methods: {
			tabClick(index){
				this.integral();
				this.tabLindex = index;
			},
			integral(){
				Rest.post(Api.ZHUIGE_Index_Integral, {
					'type':this.tabLindex
				}).then(res => {
					if(res.code==0){
						this.user_integral = res.data.user_integral;
						this.List = res.data.user_get_bills;
						this.List2 = res.data.user_out_bills;
					}else{
						this.$u.toast(res.msg);
					}
					
				}, err => {
					console.log(err)
				});
			},
			navTo(url) {
				console.log(url)
				//if (url) {
					//uni.navigateTo({ url });
					//Util.openLink(url)
				//}
				uni.reLaunch({
					url:url
				})
			},
		}
	}
</script>

<style lang="scss">
	
	/* -------- 提示 -------- */
	.cm-none-tips {
		text-align: center;
		padding: 100rpx;
	}
	.cm-none-tips image {
		height: 200rpx;
		width: 200rpx;
		margin-bottom: 30rpx;
	}
	.cm-none-tips view {
		font-size: 24rpx;
		font-weight: 300;
		color: #999999;
	}
	
	
	.integral {
		&-top {
			padding: 32rpx;
			border-bottom: 20rpx solid #F6F6F6;
			&-ul {
				padding: 0 32rpx;
				align-items: center;
				justify-content: space-between;
				text-align: center;
				&-li {
					width: 100%;
					color: #1FD839;
						.num {
							font-size: 45rpx;
							font-weight: 700;
						}
						.sub {
							font-size: 35rpx;
							color: #333;
							padding-top: 6rpx;
						}
				}
				
			}
		}
		
		&-main {
			// &-tab {
			// 	padding: 32rpx 0 32rpx;
			// 	justify-content: space-between;
			// 	align-items: center;
			// 	text-align: center;
			// 	.nav {
			// 		flex: 1;
			// 		.line {
			// 			border-bottom: 4rpx solid #FB604D;
			// 			width: 80%;
			// 			margin: 0 auto;
			// 			position: absolute;
			// 			bottom: 0;
			// 			right: 50%;
			// 			transform: translateX(50%);
			// 		}
			// 	}
				
			// }
		&-tab {
			justify-content: space-between;
			align-items: center;
			border-bottom: 2rpx solid #eee;
			.nav {
				font-weight: 700;
				padding-bottom: 20rpx;
				padding-top: 20rpx;
				flex: 1;
				margin: 0 auto;
				
				text-align: center;
				position: relative;
				.title {
					padding: 32rpx 0;
					
				}
				.line {
					border-bottom: 4rpx solid #FB604D;
					width: 50%;
					margin: 0 auto;
					position: absolute;
					bottom: 0;
					right: 50%;
					transform: translateX(50%);
				}
			}
			.act {
				color: #FB604D;
				font-weight: 700;
			}
		}
			.list {
				margin: 0 32rpx 0;
				.item {
					justify-content: space-between;
					align-items: center;
					border: 2rpx solid #F5F5F5;
					border-radius: 14rpx;
					padding: 32rpx;
					margin-bottom: 32rpx;
					.title {
						font-size: 28prx;
					}
					.time {
						font-size: 24rpx;
						padding-top: 10rpx;
						color: #999;
					}
					.num {
						font-size: 48rpx;
						font-weight: 700;
						color: #1FD839;
					} 
				}
			}
		}
		
	}
</style>
